<template>
  <div>
    <a-card>
      <div class="text-md font-bold mb-4">正常工单</div>
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        <template #way="{ row }">
          <a-tag color="success" v-if="row.way == 1">正常报修</a-tag>
          <a-tag color="error" v-else>应急报修</a-tag>
        </template>
        <template #car="{ row }">
          {{ row.car.serial }}
        </template>
        <template #services="{ row }">
          {{
            row.ticket.services
              ? row.ticket.services.map((item) => item.name).toString(",")
              : ""
          }}
        </template>
        <template #users="{ row }">
          {{
            row.ticket.users
              ? row.ticket.users.map((item) => item.name).toString(",")
              : ""
          }}
        </template>
        <template #records="{ row }">
          {{
            row.records
              ? row.records.map((item) => item.score).toString("")
              : ""
          }}
        </template>

        <template #processes="{ row }">
          <div>
            <a-steps
              size="small"
              type="inline"
              v-model:current="row.ticket.current_process"
              :items="
                row.ticket.processes.map((item) => {
                  return {
                    title: `${item.state}${item.id}`,
                    description: `${item.comment}`,
                    status:
                      row.ticket.current_process == item.id
                        ? 'error'
                        : 'process',
                  };
                })
              "
            />
          </div>
        </template>

        <template #action="{ row }"> </template>
      </vxe-grid>
      <div class="text-md font-bold mb-4">异常工单</div>

      <vxe-grid ref="xGridAb" v-bind="gridOptionsAbnormal" v-on="gridEventAb">
        <template #way="{ row }">
          <a-tag color="success" v-if="row.way == 1">正常报修</a-tag>
          <a-tag color="error" v-else>应急报修</a-tag>
        </template>
        <template #services="{ row }">
          {{
            row.ticket.services
              ? row.ticket.services.map((item) => item.name).toString(",")
              : ""
          }}
        </template>
        <template #car="{ row }">
          {{ row.car.serial }}
        </template>
        <template #users="{ row }">
          {{
            row.ticket.users
              ? row.ticket.users.map((item) => item.name).toString(",")
              : ""
          }}
        </template>
        <template #records="{ row }">
          {{
            row.records
              ? row.records.map((item) => item.score).toString("")
              : ""
          }}
        </template>

        <template #processes="{ row }">
          <div>
            <a-steps
              size="small"
              type="inline"
              v-model:current="row.ticket.current_process"
              :items="
                row.ticket.processes.map((item) => {
                  return {
                    title: `${item.state}${item.id}`,
                    description: `${item.comment}`,
                    status:
                      row.ticket.current_process == item.id
                        ? 'error'
                        : 'process',
                  };
                })
              "
            />
          </div>
        </template>

        <template #action="{ row }"> </template>
      </vxe-grid>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
const { gridOptions, carOptions } = useHistoryRepair();
const { gridOptionsAbnormal,carAbOptions } = useHistoryRepairAbnormal();
const xGrid = ref();
const xGridAb = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    //重新加载一下form搜索
    let item = grid.getFormItems(1);
    item.itemRender.props.options = carOptions.value;
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};


const gridEventAb: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件13123");
    const grid = xGridAb.value;
    //重新加载一下form搜索
    let item = grid.getFormItems(1);
    item.itemRender.props.options = carAbOptions.value;
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
</script>
